import { createStore } from 'vuex'

// 第一步 调用 Vuex hooks createStore 来创建一个状态管理，并暴露出去
export default createStore({
    // 第二步：创建状态变量
    state: {
        // 第五步：vuex 刷新页面后数据丢失，可以配合 localstorage 进行固化保存
        userName: localStorage.getItem("userName") ? localStorage.getItem("userName") : "未登录用户"
    },
    // 如何修改这个 username 呢？
    // 第三步：我们在这里定义修改的方法，这里定义的方法是 同步修改的方法
    mutations: {
        ULOGIN(state, userName) {
            localStorage.setItem("userName", userName)
            state.userName = userName;
        },
        ULOGOUT(state) {
            localStorage.setItem("userName", "退出用户")
            state.userName = "退出用户"
        }
    },
    // 第四步：我们在这里定义 异步修改 state 的方法
    actions: {
        login({ commit }, userName) {
            commit('ULOGIN', userName)
        },
        logout({ commit }) {
            commit('ULOGOUT')
        }
    },
    // 状态管理可能是多个模块
    modules: {},
    // 类似于 computed 计算属性，可以对  state 中的值进行二次计算
    getters: {
        usernameLength(state){
            return state.userName.length
        }
    }
})